// 预先获取所有需要操作的元素
const topNavbar = document.getElementById("top-navbar");
const navbarCollapse = document.querySelector("navbar-collapse");
const navbarDropdowns = document.querySelectorAll(".nav-dropdown");
const logo = document.getElementById("logo");
const navigationLinks = document.querySelectorAll(".nav-item-link");
const navItemStyles = document.querySelectorAll(".nav-item-style");
const language = document.querySelector(".language-toggle");
const languageActive = document.querySelector(".language-active");
const navbarTogglerCustom = document.querySelector(".navbar-toggler-custom");
const webLinkItems = document.querySelectorAll(".h5-link-item");
const webLinks = document.querySelectorAll(".h5-link-collapse");
const topBoxId = document.getElementById("topBoxId");
const fullScreenMask = document.querySelector(".full_screen_mask");
const toggler = document.querySelector('[data-toggle="collapse"]');
// 选择 .h5-language-toggle 下的所有指定类名的 span 元素
const h5LanguageToggles = document.querySelectorAll(
  ".h5-language-toggle span.h5-language-cn, .h5-language-toggle span.h5-language-en, .h5-language-toggle span.h5-language-middle"
);

let hasSetNavbarDark = false;
let scrollTop = 0; // 滚动条位置
let oldScrollTop = 0;

function setNavbarDark() {
  topNavbar.classList.add("top-navbar-white");
  navbarTogglerCustom.classList.add("navbar-toggler-dark-color");
  logo.src = "../assets/image/common/logo_colorful.png";
  navigationLinks.forEach((item) => item.classList.add("nav-item-link-dark"));
  navItemStyles.forEach((item) => item.classList.add("nav-item-style-dark"));
  language.classList.add("language-toggle-dark");
  webLinkItems.forEach((item) => {
    item.style.color = "#1a1a1a";
  });
  webLinks.forEach((item) => {
    item.classList.add("h5-link-collapse-dark");
  });
  h5LanguageToggles.forEach((item) => {
    item.classList.add("h5-language-dark-span");
  });
}

function setNavbarLight() {
  if (topNavbar.classList.contains("top-navbar-white")) {
    topNavbar.classList.remove("top-navbar-white");
    navbarTogglerCustom.classList.remove("navbar-toggler-dark-color");
    logo.src = "../assets/image/common/logo.png";
    navigationLinks.forEach((item) =>
      item.classList.remove("nav-item-link-dark")
    );
    navItemStyles.forEach((item) =>
      item.classList.remove("nav-item-style-dark")
    );

    language.classList.remove("language-toggle-dark");
    webLinkItems.forEach((item) => {
      item.style.color = "#ffffff";
    });
    webLinks.forEach((item) => {
      item.classList.remove("h5-link-collapse-dark");
    });
    h5LanguageToggles.forEach((item) => {
      item.classList.remove("h5-language-dark-span");
    });
  }
}

function handleScroll() {
  scrollTop =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;

  // 滚动条滚动的距离
  let scrollStep = scrollTop - this.oldScrollTop;
  this.oldScrollTop = scrollTop;
  if (scrollStep < 0) {
    topNavbar.classList.remove("hidden-header");
    if (
      toggler.getAttribute("aria-expanded") === "true" &&
      fullScreenMask.style.display === "none"
    ) {
      fullScreenMask.style.display = "block";
    }
  } else {
    topNavbar.classList.add("hidden-header");
    // 移动端检测是否展开,展开进行关闭
    if (toggler.getAttribute("aria-expanded") === "true") {
      fullScreenMask.style.display = "none";
    }
  }

  // 处理导航栏颜色、返回顶部按钮的显示与隐藏
  if (hasSetNavbarDark) {
    return;
  }
  if (scrollTop > 75) {
    topBoxId.style.opacity = 1; // 显示返回顶部按钮
    // topNavbar.classList.remove("header-large");
    setNavbarDark();
  } else {
    topBoxId.style.opacity = 0; // 隐藏返回顶部按钮
    // topNavbar.classList.add("header-large");
    if (toggler.getAttribute("aria-expanded") === "true") {
      setNavbarDark();
    } else {
      setNavbarLight();
    }
  }
}

// 监听滚动事件
window.addEventListener("scroll", handleScroll);

// 底部折叠面板下拉框交互
const footCollapse = document.querySelectorAll(".foot-collapse");
footCollapse.forEach((item) => {
  item.addEventListener("click", () => {
    footCollapse.forEach((it) => {
      if (item !== it) {
        it.querySelector("i").classList.remove("icon-shang");
        it.querySelector("i").classList.add("icon-xia");
      }
    });
    // 获取当前图标元素
    const icon = item.querySelector("i");
    // 切换图标样式
    if (icon.classList.contains("icon-xia")) {
      icon.classList.remove("icon-xia");
      icon.classList.add("icon-shang");
    } else {
      icon.classList.remove("icon-shang");
      icon.classList.add("icon-xia");
    }
  });
});

toggler.addEventListener("click", function () {
  var icon = document.getElementById("menu-icon");
  if (icon.classList.contains("icon-menu")) {
    icon.classList.remove("icon-menu");
    icon.classList.add("icon-guanbi"); // 同样假设这是关闭图标的类名
    icon.style.fontSize = "1rem";
    fullScreenMask.style.display = "block";
  } else {
    icon.classList.remove("icon-guanbi");
    icon.classList.add("icon-menu");
    icon.style.fontSize = "2rem";
    fullScreenMask.style.display = "none";
  }
});

// 下拉菜单交互
navbarDropdowns.forEach((dropdown) => {
  dropdown.onmouseleave = function () {
    const dropdownMenu = dropdown.querySelector(".dropdown-menu");
    dropdownMenu.classList.remove("show");
  };
  dropdown.onmouseenter = function () {
    const dropdownMenu = dropdown.querySelector(".dropdown-menu");
    dropdownMenu.classList.add("show");
  };
});

// 导航栏鼠标悬停交互
topNavbar.onmouseenter = function () {
  hasSetNavbarDark = true;
  setNavbarDark();
};
topNavbar.onmouseleave = function () {
  hasSetNavbarDark = false;
  if (scrollTop <= 70) {
    if (toggler.getAttribute("aria-expanded") === "true") {
      setNavbarDark();
    } else {
      setNavbarLight();
    }
  }
};

// 返回到顶部
topBoxId.onclick = function () {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};

// 初次加载顶部按钮显示
(function () {
  let scrollDistance = window.scrollY || window.pageYOffset;
  if (scrollDistance > 75) {
    topBoxId.style.opacity = 1; // 显示返回顶部按钮
    setNavbarDark();
  } else {
    topBoxId.style.opacity = 0; // 隐藏返回顶部按钮
    setNavbarLight();
  }
})();

// 客服热线模态弹窗
const supportBox = document.querySelector(".support-box");
const contactCard = document.querySelector(".contact-card");
const modalOverlay = document.getElementById("phone-modal-overlay");
const modal = document.getElementById("phone-modal");

function showModal() {
  modalOverlay.style.display = "block";
  // 触发重排以确保动画生效
  modal.offsetHeight;
  modal.classList.add("show");
  document.body.style.overflow = "hidden";
}

function hideModal() {
  modal.classList.remove("show");
  setTimeout(() => {
    modalOverlay.style.display = "none";
    document.body.style.overflow = "auto";
  }, 300);
}

if (modalOverlay) {
  modalOverlay.addEventListener("click", function (e) {
    if (e.target === modalOverlay) {
      hideModal();
    }
  });
}

if (isMobile()) {
  supportBox.classList.add("disable-hover");
  supportBox.addEventListener("click", function () {
    showModal();
  });
} else {
  supportBox.addEventListener("mouseenter", function () {
    contactCard.style.display = "flex";
  });
  supportBox.addEventListener("mouseleave", function () {
    contactCard.style.display = "none";
  });
}

// 检测是否为移动设备
function isMobile() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  );
}
